<template>
  <view class="schedule-container">
    <!-- 医生信息 -->
    <view class="doctor-info card">
      <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
      <view class="info">
        <view class="name-title">
          <text class="name">{{ doctor.name }}</text>
          <text class="title">{{ doctor.title }}</text>
        </view>
        <text class="specialty">{{ doctor.specialty }}</text>
        <view class="department">
          <text class="label">所在科室：</text>
          <text class="value">{{ doctor.department }}</text>
        </view>
      </view>
    </view>
    
    <!-- 日期选择 -->
    <view class="date-section card">
      <view class="section-title">选择就诊日期</view>
      <scroll-view scroll-x class="date-list">
        <view 
          class="date-item"
          v-for="(date, index) in availableDates"
          :key="index"
          :class="{ active: selectedDate === date.value }"
          @tap="selectDate(date.value)"
        >
          <text class="week">{{ date.week }}</text>
          <text class="day">{{ date.day }}</text>
          <text class="month">{{ date.month }}月</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 时间段选择 -->
    <view class="time-section card">
      <view class="section-title">选择就诊时间</view>
      <view class="time-grid">
        <view 
          class="time-item"
          v-for="(time, index) in availableTimes"
          :key="index"
          :class="{ 
            active: selectedTime === time.value,
            disabled: time.disabled
          }"
          @tap="selectTime(time)"
        >
          <text class="time-text">{{ time.label }}</text>
          <text class="count" v-if="!time.disabled">余{{ time.count }}个</text>
          <text class="status" v-else>已约满</text>
        </view>
      </view>
    </view>
    
    <!-- 就诊人选择 -->
    <view class="patient-section card">
      <view class="section-title">选择就诊人</view>
      <view class="patient-list">
        <view 
          class="patient-item"
          v-for="(patient, index) in patients"
          :key="index"
          :class="{ active: selectedPatient === patient.id }"
          @tap="selectPatient(patient.id)"
        >
          <view class="patient-info">
            <text class="name">{{ patient.name }}</text>
            <text class="id-card">{{ patient.idCard }}</text>
          </view>
          <text class="relation">{{ patient.relation }}</text>
        </view>
        <view class="add-patient" @tap="addNewPatient">
          <text class="iconfont icon-add"></text>
          <text>添加就诊人</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="fee-info">
        <text class="label">挂号费：</text>
        <text class="fee">¥{{ doctor.fee }}</text>
      </view>
      <button 
        class="submit-btn primary-btn"
        :disabled="!canSubmit"
        @tap="submitAppointment"
      >
        确认预约
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 医生信息
const doctor = ref({
  name: '张医生',
  title: '主任医师',
  avatar: '/static/doctor/doctor1.jpg',
  specialty: '擅长：冠心病、心律失常、高血压等心血管疾病的诊治',
  department: '心内科',
  fee: 100
})

// 可选日期
const availableDates = [
  { value: '2024-03-21', week: '周四', day: '21', month: '3' },
  { value: '2024-03-22', week: '周五', day: '22', month: '3' },
  { value: '2024-03-23', week: '周六', day: '23', month: '3' },
  { value: '2024-03-24', week: '周日', day: '24', month: '3' },
  { value: '2024-03-25', week: '周一', day: '25', month: '3' }
]

// 可选时间
const availableTimes = [
  { value: '0900', label: '09:00', count: 10 },
  { value: '0930', label: '09:30', count: 8 },
  { value: '1000', label: '10:00', count: 5 },
  { value: '1030', label: '10:30', disabled: true },
  { value: '1100', label: '11:00', count: 3 }
]

// 就诊人列表
const patients = [
  { id: 1, name: '张三', idCard: '1234567890', relation: '本人' },
  { id: 2, name: '张小明', idCard: '0987654321', relation: '子女' }
]

// 表单数据
const selectedDate = ref('')
const selectedTime = ref('')
const selectedPatient = ref(null)

// 是否可以提交
const canSubmit = computed(() => {
  return selectedDate.value && selectedTime.value && selectedPatient.value
})

// 选择日期
const selectDate = (date) => {
  selectedDate.value = date
}

// 选择时间
const selectTime = (time) => {
  if (!time.disabled) {
    selectedTime.value = time.value
  }
}

// 选择就诊人
const selectPatient = (patientId) => {
  selectedPatient.value = patientId
}

// 添加就诊人
const addNewPatient = () => {
  uni.navigateTo({
    url: '/pages/patient/add'
  })
}

// 提交预约
const submitAppointment = () => {
  if (!canSubmit.value) return
  
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showModal({
      title: '预约成功',
      content: '您的挂号预约已提交成功',
      showCancel: false,
      success: () => {
        // 跳转到支付页面
        uni.navigateTo({
          url: `/pages/payment/index?orderId=123456`
        })
      }
    })
  }, 1500)
}
</script>

<style lang="scss">
.schedule-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  padding-bottom: 120rpx;
  
  .doctor-info {
    display: flex;
    margin-bottom: 20rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name-title {
        margin-bottom: 8rpx;
        
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-right: 16rpx;
        }
        
        .title {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
      
      .specialty {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .department {
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $primary-color;
        }
      }
    }
  }
  
  .date-section {
    margin-bottom: 20rpx;
    
    .date-list {
      white-space: nowrap;
      margin: 0 -30rpx;
      padding: 0 30rpx;
      
      .date-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx 30rpx;
        margin-right: 20rpx;
        background: $bg-color;
        border-radius: $radius-md;
        transition: all 0.3s;
        
        &.active {
          background: $primary-color;
          
          text {
            color: #fff;
          }
        }
        
        .week {
          font-size: 24rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
        }
        
        .day {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 4rpx;
        }
        
        .month {
          font-size: 22rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .time-section {
    margin-bottom: 20rpx;
    
    .time-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      
      .time-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        background: $bg-color;
        border-radius: $radius-md;
        transition: all 0.3s;
        
        &.active {
          background: $primary-color;
          
          text {
            color: #fff;
          }
        }
        
        &.disabled {
          opacity: 0.5;
          
          text {
            color: $text-secondary;
          }
        }
        
        .time-text {
          font-size: 28rpx;
          color: $text-primary;
          margin-bottom: 8rpx;
        }
        
        .count {
          font-size: 22rpx;
          color: $text-regular;
        }
        
        .status {
          font-size: 22rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .patient-section {
    .patient-list {
      .patient-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        margin-bottom: 20rpx;
        background: $bg-color;
        border-radius: $radius-md;
        transition: all 0.3s;
        
        &.active {
          background: $primary-light;
          
          .patient-info {
            .name {
              color: $primary-color;
            }
          }
        }
        
        .patient-info {
          .name {
            font-size: 30rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .id-card {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .relation {
          font-size: 26rpx;
          color: $text-regular;
          background: #fff;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
        }
      }
      
      .add-patient {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx;
        background: $bg-color;
        border-radius: $radius-md;
        border: 2rpx dashed $text-secondary;
        
        .icon-add {
          font-size: 32rpx;
          color: $text-secondary;
          margin-right: 8rpx;
        }
        
        text {
          font-size: 28rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    
    .fee-info {
      .label {
        font-size: 26rpx;
        color: $text-regular;
        margin-right: 8rpx;
      }
      
      .fee {
        font-size: 32rpx;
        color: $danger;
        font-weight: bold;
      }
    }
    
    .submit-btn {
      width: 240rpx;
    }
  }
}
</style> 